<template>
  <div class="classroom">
     <el-table 
     :data="tableData"
      style="width: 50%"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#F0F2F5'}"
      >
      <el-table-column prop="key" label="编号" ></el-table-column>
      <el-table-column prop="lesson" label="所属阶段" ></el-table-column>
      <el-table-column prop="stage" label="课程名称" ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      tableData:[],
      role:'',
      id:'',
      roleid:'',
    }
  },
   mounted(){
    this.initData()
  },
  methods:{
     initData(){
        this.$httpAxios(this.$api.COURSE_LIST(),res=>{
          this.tableData=res.data
        })
     },
      tableRowClassName({row, rowIndex}) {
        // console.log(rowIndex)
        if (rowIndex%2==0) {
          return 'warning-row';
        } else if (rowIndex%2==1) {
          return 'success-row';
        }
        return '';
      },
  }
}
</script>

<style>
.el-table .warning-row {
    background: #ffff ;
  }
 .el-table .success-row {
    background: #F0F2F5;
  }
</style>